.wrap{
  margin:0 auto;
  width: 375rpx;
  height:550rpx;
  position: relative;
}
.animation {
  position: absolute;
  width: 375rpx;
  height:550rpx;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}
.start{
  background: url("https://wesociastg.blob.core.chinacloudapi.cn/wesocial-static/animation.png");
  background-size: calc(375rpx * 31) 550rpx;
  background-position: 0 0;
  animation: mymove 1.3s steps(30) 1s 1 forwards;
}
@keyframes mymove {
  from {
    background-position-x: 0rpx;
  }

  to {
    background-position-x: calc(-375rpx * 30);
  }
}